{% extends "base/index.html" %}

{% block css %}
     <link rel="stylesheet" href="/static/asciinema-player/asciinema-player.css">

{% endblock %}

{% block center %}

    <!--用户信息-->
    <div class="panel panel-default center-top" style="min-width:auto;">
        <div class="panel-heading">
            <div class="row" style="padding-top:5px;padding-left:10px;">
                <div class="col-sm-9">
                    <p>终端回放</p>
                </div>
                <div class="col-sm-3">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for key ..." id="search-key">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" id="sub-search">搜索</button>
                        </span>
                    </div><!-- /input-group -->
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div style="margin-bottom: 10px;">
                <div class="col-sm-12" id="record-info">
                    <table class="table table-hover">
                        <thead>
                        <tr style="background-color: #f5f5f5;">
                            <th>ID</th>
                            <th>服务器</th>
                            <th>用户</th>
                            <th>状态</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>时长</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for i in data_list %}
                            <tr name="tbody">
                                <td>{{ i.id }}</td>
                                <td>{{ i.host }}</td>
                                <td>{{ i.user }}</td>
                                <td>
                                {% if i.is_connecting == False %}
                                <span  class="label label-warning">Close</span>
                                {% else %}
                                <span name="disconnect" class="label btn-success btn" title="点击断开连接" record_id="{{ i.id }}">Connecting</span>
                                {% endif %}
                                </td>
                                <td>{{ i.create_time|date:"Y-m-d H:i:s" }}</td>
                                <td>{{ i.end_time|date:"Y-m-d H:i:s"  }}</td>
                                <td>{{ i.create_time|timesince:i.end_time }}</td>
                                <td>
                                    {% if i.is_connecting == False %}
                                    <a href="" name="play" class="btn btn-sm btn-success" data-toggle="modal" data-target="#recordModal"
                                       filename="{{ i.filename }}" hostip="{{ i.host }}" nickname="{{ i.user }}" start_time="{{ i.create_time|date:"Y-m-d H:i:s" }}" end_time="{{ i.end_time }}">回放</a>
                                    {% else %}
                                    <a href="" disabled="disabled" class="btn btn-sm btn-success">回放</a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="text-right" style="margin-top:-30px;padding-right:9%">
                        <ul class="pagination" id="pager">
                            <li class="previous"><a href="/log/record/1/">首页</a></li>
                            {#上一页按钮开始#}
                            {# 如果当前页有上一页#}
                            {% if data_list.has_previous %}
                                {#  当前页的上一页按钮正常使用#}
                                <li class="previous"><a href="/log/record/{{ data_list.previous_page_number }}/">上一页</a></li>
                            {% else %}
                                {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                            {% endif %}
                            {#上一页按钮结束#}
                            {# 页码开始#}
                            {% for num in page_list %}
                                {% if num == currentPage %}
                                    <li class="item active"><a href="/log/record/{{ num }}/">{{ num }}</a></li>
                                {% else %}
                                    <li class="item"><a href="/log/record/{{ num }}/">{{ num }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {#页码结束#}
                            {# 下一页按钮开始#}
                            {% if data_list.has_next %}
                                <li class="next"><a href="/log/record/{{ data_list.next_page_number }}/">下一页</a></li>
                            {% else %}
                                <li class="next disabled"><a href="javascript:;">下一页</a></li>
                            {% endif %}
                            <li class="previous"><a href="/log/record/{{ page_nums }}/">尾页</a></li>
                            {# 下一页按钮结束#}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

<!-- Modal -->
{% block modal %}

    <!--添加用户-->
    <div class="modal fade" id="recordModal" tabindex="-1" role="dialog" aria-labelledby="recordModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-left:1%;margin-top:135px;width: 800px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="recordModalLabel">终端回放</h4>
                </div>
                <div class="modal-body" id="play-btn">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}

    <script type="text/javascript" src="/static/asciinema-player/asciinema-player.js"></script>

    <script>

        $('td a[name="play"]').click(function(){
            $("#play-btn").empty();
            var filename = $(this).attr("filename");
            var hostip = $(this).attr("hostip");
            var nickname = $(this).attr("nickname");
            var start_time = $(this).attr("start_time");
            var end_time = $(this).attr("end_time");
            var host_url = window.location.host;
            var src_str = "http://"+host_url+"/static/record/"+filename;
            var html_str = '<asciinema-player rows=30 id="play" title="WEBSSH RECORD" theme="solarized-dark" src="'+src_str+'" speed="2" '+
                'idle-time-limit="2" poster="data:text/plain,\x1b[1;32m'+
                '\x1b[1;0m用户:\x1b[1;32m'+nickname+
                '\x1b[1;0m 连接主机:\x1b[1;32m'+hostip+
                '\x1b[1;0m 时间：'+start_time+' 至 '+end_time+'"></asciinema-player>';
            console.log(html_str);
            $("#play-btn").append(html_str);
        });

        $("#sub-search").click(function () {
            var search_key = $("#search-key").val();
            $.post('/log/rdsearch/', {'search_key': search_key}, function (data) {
                if (data == "False") {
                    spop({
                        template: "无权限操作",
                        style: 'warning',
                        autoclose: 5000
                    });
                } else {
                    $("#record-info").empty();
                    $("#record-info").append(data);
                }
            });
        });


        $("span[name='disconnect']").click(function () {
            var id = $(this).attr("record_id");
            console.log(id);
            $.post('/disconnect/', {'id': id}, function (data) {
                if (data == "False") {
                    spop({
                        template: "无权限操作",
                        style: 'warning',
                        autoclose: 3000
                    });
                } else {
                    spop({
                        template: data,
                        style: 'success',
                        autoclose: 3000
                    });
                    setTimeout("location.reload()",2000)
                }
            });
        });

    </script>

{% endblock %}